Hi! I’m thinking about the solution for a long time, but I don’t know flash well, I hope maybe someone can have an idea, or have done this before.
I have results of televiewers phone voting in XML file. I need to get it from file and show it graphically.
The needed shape is a sector of circle, which should change it’s width corresponding to percent of votes for this variant. I’ve attached a screenshot from Flash.
I’ve drawn the shapes via the following code:
function circle_1(per1:Number){
var circle1:MovieClip = new MovieClip();
circle1.graphics.beginFill(0xFF0000);
var r11:Number = 150 - per1*1.3;
var r12:Number = 150 + per1*1.3;
circle1.graphics.drawCircle(0, 0, r11);
circle1.graphics.drawCircle(0, 0, r12);
circle1.graphics.endFill();
circle1.x = 0;
circle1.y = 540;
addChild(circle1);
var triangle1:MovieClip = new MovieClip();
triangle1.graphics.beginFill(0xFF8000);
triangle1.graphics.drawTriangles(
Vector.<Number>([0,540, 250,420, 250,660,]));
addChild(triangle1);
circle1.mask = triangle1;}
What I need next (and have no idea how to do that) is to update data from XML once per some short period and also to animate changes graphically – not to redraw new shapes at the moment, but to create kind of motion tween between old and new values.
I don‘t understand the way your graphic is setup. Should in the end only the red arc be visible? It looks like the yellow triangle is used as a mask, but why is it still visible? And what are the numbers for? Is 100% a full circle? Or more like a speed meter in a car with say 180 degrees?
But I did it with a complete different workflow. The 4 colored areas were PNG sequences of a full animated build up from 0% to 100% over 200 frames put inside movieClips. The code then played them to the position they need to be. Because I have 200 frames of each, the resolution was down to half a percent and that was more than enough. The Greensock library has a function to animate the playhead of a movieClip and that was in this case very usefull.
I will send you a download link via PM, as the design is copyrighted by the Principality of Liechtenstein, and I con not share it publicly. So only use it as a programming idea for you own design.
Hi!
The sence of the designers idea was that the angular width is not changed, but the radial width changes according to the percent of voting for the variant.
That piece of code was only for one sector. Mask is invisible, it “cuts” a sector from a full circle.
Thank you very much for the idea with the movieclips with full animation of each sector.
Can you please show me your code too? I’m interested how the data update method is embodied.
Should the Greensock library be downloaded and put to some Flash Professional folder?
I will also send you a link. I normally put the Greensock library in the same folder a the templates. It omes as a folder called “com” that contains everything. Be aware, that for using it in production you should pay for a license. The most basic one is not too expensive.
