14. december 2006 - 13:18
Der er
4 kommentarer og
1 løsning
Animeret graf el. streg-tegning med AS - hvordan?
Hej eksperter
Jeg skal lave en graf (eller bare nogle streger forbundet punkt for punkt), hvor stregerne bliver tegnet mens brugeren kigger med. Jeg kender til det her med at tegne linjer, kurver, figurer med udgangspunkt i noget a la dette:
this.createEmptyMovieClip("line_mc", 10);
line_mc.lineStyle(1, 0x000000, 100);
line_mc.moveTo(0, 0);
line_mc.lineTo(200, 100);
line_mc._x = 100;
line_mc._y = 100;
Men her tegnes hele linjen af en omgang. Hvordan tegner jeg den 'langsomt'?
Har tænkt på om noget med en maske oven på ovenstående ville være en løsning, men der må være nogle mere korrekte måder at gøre det på. Men hvilke?
Gode, simple og gennemtænkte løsningsforslag efterlyses :c)
Venligst
Marianne
14. december 2006 - 16:29
#1
Du kunne jo tegne grafen fortløbende, så bliver det jo nærmest en animation. Jeg tvivler på at mask kan bruges, da det må være mere end svært
at vide hvad man skal maske, medmindre det er en fast og kendt graf.
Jeg har lavet følgende kode til dig, som tegne grafen lidt efter lidt - jeg har brugt en bounce-formular til at bestemme hvor hurtigt de enkelte streger skal tegnes, man kunne sikkert også vælge at gøre det i en mere glidende beavægelse. Hvis du ønsker det er det denne del af koden du skal rette i:
this.x += (this.xe-this.x)/3;
this.y += (this.ye-this.y)/3;
Koden er:
this.createEmptyMovieClip("line_mc", 10);
line_mc.points = new Array ( [0,0] , [100,-100] , [150,175] , [150,100] , [175,200] , [200,-300] , [225,-200] , [250,125]);
line_mc.point = 0;
line_mc.x0 = line_mc.points[0][0];
line_mc.y0 = line_mc.points[0][1];
line_mc.x = line_mc.x0;
line_mc.y = line_mc.y0;
line_mc.xe = line_mc.points[0][0];
line_mc.ye = line_mc.points[0][1];
line_mc.onEnterFrame = function(){
if(this.point<this.points.length){
this.clear();
this.lineStyle(1, 0x000000, 100);
for(var i:Number=1;i<this.point;i++){
this.moveTo(this.points[i-1][0], -this.points[i-1][1]);
this.lineTo(this.points[i][0], -this.points[i][1]);
}
this.x += (this.xe-this.x)/3;
this.y += (this.ye-this.y)/3;
this.moveTo(this.x0, -this.y0);
this.lineTo(this.x, -this.y);
if(Math.round(this.x)==Math.round(this.xe) and Math.round(this.y)==Math.round(this.ye)){
this.x0 = this.points[this.point][0];
this.y0 = this.points[this.point][1];
this.point++;
this.xe = this.points[this.point][0];
this.ye = this.points[this.point][1];
//trace(this.point+": "+this.x0+","+this.y0+" - "+this.xe+","+this.ye);
}
}
}
Vh/Alexander
Ps. normalt gider jeg ikke kode for folk (gratis), men problemstillingen her synes jeg var sjov. Håber du alligevel via koden kan bruge det som hjælp til selvhjælp.
15. december 2006 - 09:40
#2
Hej Alexander
Ser spændende ud - og tak for denne ganske omkostningsfri juleservice :c)
Jeg kan helt sikkert bruge ideen - og bygge videre på den, så tusind tak for hjælpen.
Du får velfortjente points.
Skulle andre have alternative brugbare måder at løse problemet på, er jeg villig til at oprette et spørgsmål mere og uddele points igen igen.
Venligst, Marianne
19. december 2006 - 06:21
#4
Nu kunne jeg jo være hankøn og forsigtigt leve lidt hemmelige drømme ud med hjælp fra mit pseudonym :c))
Men det er jeg ikke - og det er da rart at vide, at der ihvertfald er ET sted verden ligger for mine fødder. ;c)
De allervenligste hilsener og glædelig jul etc.
Marianne