Another version using _xmouse to get a Stage.width factor so you can see
easing via onMouseMove.
Nothing extra needed in this example - just copy/paste.
- JG
function drawArc ( mc, x, y, radius, arc, startAngle, yRadius)
{
// http://www.formequalsfunction.com/downloads/drawmethods.html
if (arguments.length<5) return;
if (yRadius == undefined) yRadius = radius;
var segAngle, theta, angle, angleMid, segs, ax, ay, bx, by, cx, cy;
if (Math.abs(arc)>360) arc = 360;
segs = Math.ceil(Math.abs(arc)/45);
segAngle = arc/segs;
theta = -(segAngle/180)*Math.PI;
angle = -(startAngle/180)*Math.PI;
ax = x-Math.cos(angle)*radius;
ay = y-Math.sin(angle)*yRadius;
if (segs>0) {
for (var i = 0; i<segs; i++) {
angle += theta;
angleMid = angle-(theta/2);
bx = ax+Math.cos(angle)*radius;
by = ay+Math.sin(angle)*yRadius;
cx =
ax+Math.cos(angleMid)*(radius/Math.cos(theta/2));
cy =
ay+Math.sin(angleMid)*(yRadius/Math.cos(theta/2));
mc.curveTo(cx, cy, bx, by);
}
}
return {x:bx, y:by};
};
//
// DRAW CIRCLE FROM OBJECT
//
function circle_draw ( obj:Object ):Void
{
var mc = obj.mc;
mc.clear();
mc.moveTo ( obj.x, obj.y );
mc.beginFill.apply ( mc, obj.fillStyle );
mc.lineStyle.apply ( mc, obj.lineStyle );
drawArc ( mc, obj.x, obj.y, obj.radius, obj.arc, obj.startAngle,
obj.yRadius )
}
//
// SHOW PERCENTAGE IN TEXT
//
function setPer ( per ):Void
{
txt.text = per + ' %';
txt.setTextFormat(txt_fmt);
txt._x = Math.round(circle_holder._x - (txt._width>>1));
txt._y = Math.round(circle_holder._y + (circle_top.radius*2) +
circle_top.lineStyle[0]);
}
//
// ADJUST TO NEW PERCENTAGE
//
function adjust_view ()
{
// per
var margin = 20;
var per = Math.max( 0 , Math.min ( 1, (this._xmouse - margin) /
(Stage.width-(margin*2))));
var new_arc = Math.round( -360 * per );
// update
if ( new_arc != dest_arc )
{
dest_arc = new_arc;
circle_holder.onEnterFrame = function()
{
cur_arc += (dest_arc - cur_arc) * .1 ;
circle_top.arc = cur_arc;
circle_draw ( circle_top ); // circle
setPer (
Math.round(Math.abs(circle_top.arc)/360*100) ); // txt
if ( cur_arc == dest_arc ) delete
circle_holder.onEnterFrame;
}
}
}
//
// CREATE
//
function INIT()
{
// circle
circle_holder = this.createEmptyMovieClip( "circle_holder", 20 );
cur_arc = 0;
dest_arc = 0;
// top circle
circle_top = {
mc: circle_holder.createEmptyMovieClip( "mc", 40 ),
x:0,
y:0,
radius:50,
arc: 0,
startAngle: 90,
yRadius: 50,
lineStyle: [ 15, 0xFFFFFF, 100 ],
fillStyle: [ ]
};
// add top glow
circle_top.mc.filters = [ new flash.filters.GlowFilter(0xFFFFFF, .8,
15, 15, 2, 3, false, false ) ];
// bottom circle
circle_bottom = {
mc: circle_holder.createEmptyMovieClip( "mc2", 30 ),
arc: 360,
x: circle_top.x,
y: circle_top.y,
radius: circle_top.radius,
startAngle: circle_top.startAngle,
yRadius: circle_top.yRadius,
lineStyle: [ 13, 0xFFFFFF, 20 ],
fillStyle: circle_top.fillStyle
};
// txt
txt = this.createTextField("txt", 100, 100, 100, 300, 100);
txt.multiline = false;
txt.autoSize= true;
txt.wordWrap = false;
txt_fmt = new TextFormat();
txt_fmt.color = 0xFFFFFF;
// stage
Stage.scaleMode = 'noScale';
Stage.align = 'TL';
Stage.addListener( this );
bg = this.createEmptyMovieClip("bg", 10 );
onResize = function ()
{
var W = Stage.width;
var H = Stage.height;
bg.clear();
bg.beginFill(0x333333, 100);
bg.moveTo(0, 0);
bg.lineTo(W, 0);
bg.lineTo(W, H);
bg.lineTo(0, H);
bg.lineTo(0, 0);
bg.endFill();
circle_holder._x = (W>>1);
circle_holder._y = (H>>1)- circle_top.radius;
}
circle_draw ( circle_top );
circle_draw ( circle_bottom );
onMouseMove = adjust_view;
onResize();
setPer ( 0 );
}
INIT();
_____________________________
Jesse Graupmann
www.jessegraupmann.com
www.justgooddesign.com/blog/
_____________________________
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Jesse
Graupmann
Sent: Monday, August 06, 2007 4:24 PM
To: [email protected]
Subject: RE: [Flashcoders] Coding a circular preloader
Using the arc prototype ( AS 1/2 ) from formequalsfunction draw methods;
http://www.formequalsfunction.com/downloads/drawmethods.html and Tweener (
AS 2 ) from http://code.google.com/p/tweener/ I put together a simple tween
version of the circle.
Assuming you have Tweener in the same directory, you can copy and paste this
example.
- JG
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Omar Fouad
Sent: Monday, August 06, 2007 2:09 PM
To: [email protected]
Subject: Re: [Flashcoders] Coding a circular preloader
Hahaha Steven :D that was a good one ;). Thanks david.. but I don't have
it.. i'll try to convince my boss. But i would like to know the same how
that could be achieved like in the website.....
--
Omar M. Fouad
_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
