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
/*-------------------------------------------------------------
//
// http://www.formequalsfunction.com/downloads/drawmethods.html
//
mc.drawArc is a method for drawing regular and eliptical
arc segments. This method replaces one I originally
released to the Flash MX beta group titled arcTo and contains
several optimizations based on input from the following
people: Robert Penner, Eric Mueller and Michael Hurwicz.
-------------------------------------------------------------*/
MovieClip.prototype.drawArc = function(x, y, radius, arc, startAngle,
yRadius) {
// ==============
// mc.drawArc() - by Ric Ewing ([EMAIL PROTECTED]) -
version 1.5 - 4.7.2002
//
// x, y = This must be the current pen position... other values will
look bad
// radius = radius of Arc. If [optional] yRadius is defined, then r
is the x radius
// arc = sweep of the arc. Negative values draw clockwise.
// startAngle = starting angle in degrees.
// yRadius = [optional] y radius of arc. Thanks to Robert Penner for
the idea.
// ==============
// Thanks to: Robert Penner, Eric Mueller and Michael Hurwicz for
their contributions.
// ==============
if (arguments.length<5) {
return;
}
// if yRadius is undefined, yRadius = radius
if (yRadius == undefined) {
yRadius = radius;
}
// Init vars
var segAngle, theta, angle, angleMid, segs, ax, ay, bx, by, cx, cy;
// no sense in drawing more than is needed :)
if (Math.abs(arc)>360) {
arc = 360;
}
// Flash uses 8 segments per circle, to match that, we draw in a
maximum
// of 45 degree segments. First we calculate how many segments are
needed
// for our arc.
segs = Math.ceil(Math.abs(arc)/45);
// Now calculate the sweep of each segment
segAngle = arc/segs;
// The math requires radians rather than degrees. To convert from
degrees
// use the formula (degrees/180)*Math.PI to get radians.
theta = -(segAngle/180)*Math.PI;
// convert angle startAngle to radians
angle = -(startAngle/180)*Math.PI;
// find our starting points (ax,ay) relative to the secified x,y
ax = x-Math.cos(angle)*radius;
ay = y-Math.sin(angle)*yRadius;
// if our arc is larger than 45 degrees, draw as 45 degree segments
// so that we match Flash's native circle routines.
if (segs>0) {
// Loop for drawing arc segments
for (var i = 0; i<segs; i++) {
// increment our angle
angle += theta;
// find the angle halfway between the last angle and
the new
angleMid = angle-(theta/2);
// calculate our end point
bx = ax+Math.cos(angle)*radius;
by = ay+Math.sin(angle)*yRadius;
// calculate our control point
cx =
ax+Math.cos(angleMid)*(radius/Math.cos(theta/2));
cy =
ay+Math.sin(angleMid)*(yRadius/Math.cos(theta/2));
// draw the arc segment
this.curveTo(cx, cy, bx, by);
}
}
// In the native draw methods the user must specify the end point
// which means that they always know where they are ending at, but
// here the endpoint is unknown unless the user calculates it on
their
// own. Lets be nice and let save them the hassle by passing it
back.
return {x:bx, y:by};
};
//
// DRAW CIRCLE FROM OBJECT
//
function circle_draw ( obj:Object )
{
var mc = obj.mc;
mc.clear();
mc.moveTo ( obj.x, obj.y );
mc.beginFill.apply ( mc, obj.fillStyle );
mc.lineStyle.apply ( mc, obj.lineStyle );
mc.drawArc ( obj.x, obj.y, obj.radius, obj.arc, obj.startAngle,
obj.yRadius )
}
//
// CENTER AND REDRAW CIRCLES
//
function updateCircle ( top_obj, bottom_obj )
{
// redraw
if ( arguments.length > 0 )
{
// center
var X = (Stage.width >> 1);
var Y = (Stage.height >> 1) - top_obj.yRadius ||
top_obj.radius;
top_obj.x = X;
top_obj.y = Y;
circle_draw ( top_obj );
if ( arguments.length > 1 )
{
bottom_obj.x = X;
bottom_obj.y = Y;
circle_draw ( bottom_obj );
}
}
}
//
// CREATE
//
import caurina.transitions.Tweener
import flash.filters.GlowFilter;
function INIT ()
{
INIT_create ( );
INIT_stage ( );
INIT_glow ( );
INIT_tween ( );
onMouseDown = INIT; // resets on mouse press
}
function INIT_stage ()
{
Stage.scaleMode = 'noScale';
Stage.align = 'TL';
Stage.addListener( this );
bg = this.createEmptyMovieClip("bg", 1);
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();
updateCircle ( circle_obj, obj_base );
}
onResize();
}
function INIT_create ()
{
// top
circle_obj = {
mc: this.createEmptyMovieClip( "mc", 30 ),
x:0,
y:0,
radius:50,
arc: 0,
startAngle: 90,
yRadius:50,
lineStyle: [ 15, 0xFFFFFF, 100 ],
fillStyle: [ ]
};
// bottom
obj_base = {
mc: this.createEmptyMovieClip( "mc2", 20 ),
arc: 360,
x: circle_obj.x,
y: circle_obj.y,
radius: circle_obj.radius,
startAngle: circle_obj.startAngle,
yRadius: circle_obj.yRadius,
lineStyle: [ 13, 0xFFFFFF, 20 ],
fillStyle: circle_obj.fillStyle
};
// draw base
circle_draw ( obj_base );
}
function INIT_glow ()
{
// add top glow
var color:Number = 0xFFFFFF;
var alpha:Number = .8;
var blurX:Number = 15;
var blurY:Number = 15;
var strength:Number = 2;
var quality:Number = 3;
var inner:Boolean = false;
var knockout:Boolean = false;
var glow_filter:GlowFilter = new GlowFilter(color,
alpha,
blurX,
blurY,
strength,
quality,
inner,
knockout);
circle_obj.mc.filters = [ glow_filter ];
}
function INIT_tween ( )
{
// tween top - alpha
circle_obj.mc._alpha = 0;
Tweener.addTween ( circle_obj.mc, {
_alpha:100,
time:1,
delay:.5,
transition:'easeOutCubic'
})
// tween top - arc
Tweener.addTween ( circle_obj, {
arc:-360,
time:4,
delay:.2,
transition:'easeInOutCubic',
onUpdate: mx.utils.Delegate.create ( this, updateCircle ),
onUpdateParams:[ circle_obj ]
});
}
// starts draw and tween
INIT();
_____________________________
Jesse Graupmann
www.jessegraupmann.com
www.justgooddesign.com/blog/
_____________________________
-----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
