Countdown (Kreisbewegung/Füllung)

[richyt]

Hallo,
ich hoffe mir kann jemand weiterhelfen.
Folgendes Problem:

Ich möchte ein Countdown aufbauen.
Dieser soll grafisch in Form einer Uhr abwärtszählen.
Dabei sieht man nur zwei farbliche Flächen. Die eine Fläche wird immer grösser und stellt sozusagen den Sekundenzeiger dar.
War das jetzt verständlich?

Dieses Script hab ich in der AS-Referenz gefunden:

_root.createEmptyMovieClip( "circle", 1 );
with ( _root.circle )
{
    lineStyle( 0, 0x0000FF, 100 );
    beginFill( 0xFF0000 );
    moveTo( 500, 500 );
    curveTo( 600, 500, 600, 400 );
    curveTo( 600, 300, 500, 300 );
    curveTo( 400, 300, 400, 400 );
    curveTo( 400, 500, 500, 500 );
    endFill();
} 

Eine Hilfe wie der Kreis sich aufbaut, würde mir glaub ich schon reichen!

Ein Countdown der abwärts zählt (mit Zahlen) hab ich schon.

[salazar]

scripten ist hier glaub ich schwieriger als zu tweenen! würde die ani von hand machen und in einen mc stecken... diesen kannste ja mit gotoAndStop(countdown); ansteuern... also einfach ne function schreiben die die werte des countdowns auf deinen mc überträgt!

cya, sal

[richyt]

Danke für die Hilfe.
Aber das bringt mich nicht so richtig weiter.

Wenn jetzt zum Beispiel noch 45 Sekunden übrig habe, dann muss der Kreis 1/4-gefüllt sein und mit jeder Sekunde immer voller werden.
Bei ausbleibenden 15 Sekunden ist der Kreis zu 3/4-voll.

Wie bekomm ich das hin?

[richyt]

Ich hab jetzt die Kreisbewegung als Tweening in einem MC.
Wie sieht die Funktion aus, die die Werte des countdowns auf meinen mc überträgt?

Die Kreisbewegung soll jeweils nur einmal durchlaufen.
bei 40 sec wird der Kreis natürlich langsamer voll, als bei 20 sec.

[maxel]

Eine andere Moeglichkeit waere wohl auf einer Ebene ein groesseres Rechteck zu bewegen, und auf einer Ebene darueber einen gefuellten Kreis zu maskieren. Es waere dann nur der Teil des Rechtecks sichtbar ueber dem der Kreis liegt, und man koennte durch Bewegen des Rechtecks diesen Teil groesser werden lassen.
Gruss KH

[Alois]

//drawArc-function by anyway
MovieClip.prototype.drawArc = function(xc, yc, r1, r2, ngl, stngl) {
        var x2, y2, xp, yp, l, t;
        t = Math.PI/4*(ngl/Math.abs(ngl));
        ngl *= Math.PI/180;
        stngl *= Math.PI/180;
        l = Math.floor(ngl/t);
        for (var i = 0; i<Math.abs(l); i++) {
                x2 = xc+r1*Math.cos((stngl+t));
                y2 = yc+r2*Math.sin((stngl+t));
                xp = xc+r1*(2-Math.sin((Math.PI-t)/2))*Math.cos((stngl+t/2));
                yp = yc+r2*(2-Math.sin((Math.PI-t)/2))*Math.sin((stngl+t/2));
                this.curveTo(xp, yp, x2, y2);
                stngl += t;
        }
        if (Math.abs(ngl-l*t)>Math.PI/360) {
                x2 = xc+r1*Math.cos((stngl+ngl-l*t));
                y2 = yc+r2*Math.sin((stngl+ngl-l*t));
                xp = xc+r1*(2-Math.sin((Math.PI+ngl-l*t)/2))*Math.cos((stngl+(ngl-l*t)/2));
                yp = yc+r2*(2-Math.sin((Math.PI+ngl-l*t)/2))*Math.sin((stngl+(ngl-l*t)/2));
                this.curveTo(xp, yp, x2, y2);
        }
};
//Zeichne Teilkreis
MovieClip.prototype.teilkreis= function(xc,yc,r,ngl,ln,fl){
        var ngl_bogen=ngl/180*Math.PI;
        with(this){
                moveTo(xc,yc);
                lineStyle(ln[0],ln[1],ln[2]);
                beginFill(fl[0],fl[1]);
                lineTo(xc+r,yc);
                drawArc(xc,yc,r,r,ngl,0);
                lineTo(xc,yc);
                endFill();
        }
}
//Bedeutung der variabblen in der teilkreis-Funktion
//xc: x-Position des Teilkreismittelpunkts
//yc: y-Position des Teilkreismittelpunkts
//r: Radius des Teilkreises
//ngl: Winkel des Teilkreises
//ln: lineStyle-Daten als array
//beginFill-Daten als array
//Beispiel:
teilkreis(50,50,30,240,[0, 0xff0000, 100], [ 0xff0000, 50]); 

Gruß

Alois

[warrantmaster]

...ich liebe es...

gruß@alois

[zappa]

sowas hab ich auch gesucht!!!

man, wäre math doch schon immer "angewandte mathematik" gewesen!!!

wie viel leichter hätte man sowas verstehen gelernt!!!!

cos .... sin.... abs.....arc................

DANKE ALOIS!!!!

[mooseMash]

hut ab alois, ich hatte bereits das vergnügen deinen ringzauber kennezulernen, war hier aber nicht anfangs von einer animation die rede, so ne art sekundenzeiger der dann immer mehr fläche eines kreises sichtbar werden läßt?
ich hab das auf jedenfall so verstanden und mal hierfür ne zip drangehängt
wie ist hier eigentlich die beste möglichkeit ne fla oder swf rüberzubringen, als zip?
gibt es nicht die möglichkeit die hier als swf abzulegen und zu verlinken, so das man sich erst ein bild machen kann von dem was man da herunterlädt?

[richyt]

wow danke für die Hilfe!

ich habs jetzt so gelöst:

Meine Animation im MC steuer ich nun zeitlich mit Hilfe dieses Threads:

Geschwindigkeit von Zeitleistenanimationen unabhängig von der Bildrate steuern

wunderbar

[Alois]

Geschrieben von mooseMash
hut ab alois, ich hatte bereits das vergnügen deinen ringzauber kennezulernen,....

....ups, jetzt hat Du mich geoutet , ich hab hier nämlich eigentlich nur mein script aus diesem thread vereinfacht....

.... war hier aber nicht anfangs von einer animation die rede,....

...das ist ja auch kein problem, kleines Beispiel gefälligst:

//hier,die funktionen aus dem script das ich vorher gepostet habe
//und dann nur noch
uhranimation=function(){
    z++
    clear();
    teilkreis(100,100,80,z,[],[0xff0000,100]);
    if(z==360)clearInterval(myInterval);
}
z=0;
myInterval=setInterval(uhranimation,25); 

Alois