Thanks Jesse, this was a very good idea.....
On 8/7/07, Jesse Graupmann <[EMAIL PROTECTED]> wrote:
>
> 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: flashcoders@chattyfig.figleaf.com
> 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: flashcoders@chattyfig.figleaf.com
> 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
>
> _______________________________________________
> Flashcoders@chattyfig.figleaf.com
> 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
>
--
Omar M. Fouad - Digital Emotions
http://www.omarfouad.net
This e-mail and any attachment is for authorised use by the intended
recipient(s) only. It may contain proprietary material, confidential
information and/or be subject to legal privilege. It should not be copied,
disclosed to, retained or used by, any other party. If you are not an
intended recipient then please promptly delete this e-mail and any
attachment and all copies and inform the sender. Thank you.
_______________________________________________
Flashcoders@chattyfig.figleaf.com
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
