Folks i was just wondering how to create a circular preloader with actionscript. I thought about drawing many wedges increasing each time the angle accodring the percentage loaded, but how can i include an easing effect to this rotating motion?
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. _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
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. _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
> 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.
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. _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
function drawSegment(target, rx, ry, x, y, sgm, s1, s2) { var rad = Math.PI/180; if (!s1 and !s2 or s1 == s2) { var grad = 360; var segm = grad/sgm; var x1 = rx+x; var y1 = y; target.moveTo(x1, y1); } else { s1>s2 ? s1 -= 360 : ""; var x1 = rx*Math.cos(s1*rad)+x; var y1 = ry*Math.sin(s1*rad)+y; var grad = s2-s1; var segm = grad/sgm; target.moveTo(x, y); target.lineTo(x1, y1); } for (var s = segm+s1; s<(grad+.1+s1); s += segm) { var x2 = rx*Math.cos((s-segm/2)*rad)+x; var y2 = ry*Math.sin((s-segm/2)*rad)+y; var x3 = rx*Math.cos(s*rad)+x; var y3 = ry*Math.sin(s*rad)+y; // begin tnx 2 Robert Penner var cx = 2*x2-.5*(x1+x3); var cy = 2*y2-.5*(y1+y3); target.curveTo(cx, cy, x3, y3); // end tnx 2 Robert Penner :) x1 = x3; y1 = y3; } if (grad != 360) { target.lineTo(x, y); }
};
_root.onEnterFrame = function() { _root.clear(); _root.lineStyle(0); _root.beginFill(0xFF0000); a= a||0 b=b||0 a>=360 ? a -= 360 : a += 2; b>=360 ? b -= 360 : b += 3; drawSegment(_root, 150, 100, 200, 250, 8, a, b); _root.endFill(); _root.lineStyle(0); _root.beginFill(0xFF00FF); drawSegment(_root, 150, 100, 200, 200, 8, a, b); _root.endFill();
Out of curiosity, what are the "right" ways to calculate oscillations like triangle, sawtooth and pulse? Ideally oscillation would work in parallel with sine, so when sin=1, triangle=1, taking radians as the frequency parameter.
this way the wedge grows until the angle reaches 100. how can I add a simple easing equation to this?
I always used mcTween and for some loadbar preloader i used to ease the loadbar by adding
loadBar._xscale +=percent - loadBar._xscale/3; /// this way the loadBar tweens with an easeOut Effect.. I tried to apply the same principle to the wedge but without results..
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. _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Ich verwende die kostenlose Version von SPAMfighter, die bei mir bis jetzt 1614 Spammails entfernt hat. Fur private Anwender ist SPAMfighter vollig kostenlos! Jetzt gratis testen: hier klicken <http://www.spamfighter.com/lde> . _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
> -----Original Message-----
> From: flashcoders-boun...@chattyfig.figleaf.com
> [mailto:flashcoders-boun...@chattyfig.figleaf.com]On Behalf Of Omar
> Fouad
> Sent: Monday, August 06, 2007 2:24 AM
> To: Flashcoders mailing list
> Subject: [Flashcoders] Coding a circular preloader
> Folks i was just wondering how to create a circular preloader with
> actionscript. I thought about drawing many wedges increasing > each time the
> angle accodring the percentage loaded, but how can i include an easing
> effect to this rotating motion?
> 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.
> _______________________________________________
> Flashcod...@chattyfig.figleaf.com
> To change your subscription options or search the archive:
> http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
> Folks i was just wondering how to create a circular preloader with > actionscript. I thought about drawing many wedges increasing each time the > angle accodring the percentage loaded, but how can i include an easing > effect to this rotating motion?
> 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. > _______________________________________________ > Flashcod...@chattyfig.figleaf.com > To change your subscription options or search the archive: > http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
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. _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
I jumped on this thread late, but it seems to me that the best/easiest way to accomplish that circular preloader like you saw on that photography site is with a 100 frame movieclip that contains a mask that goes from frame 1-100 revealing a circle underneath. It would probably take you all of 5 minutes to make.
Sometimes the simplest solution is the best solution. _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
> I jumped on this thread late, but it seems to me that the best/easiest > way to accomplish that circular preloader like you saw on that > photography site is with a 100 frame movieclip that contains a mask that > goes from frame 1-100 revealing a circle underneath. It would probably > take you all of 5 minutes to make.
> Sometimes the simplest solution is the best solution. > _______________________________________________ > Flashcod...@chattyfig.figleaf.com > To change your subscription options or search the archive: > http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
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. _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Easing? You're showing linear data. A visual representation of a number from 0-100. I'm not sure how easing fits into this.
Your boss sounds like a real genius because it's absolutely brilliant to force somebody to spend many hours building something that could be built in 5 minutes - really smart use of time and money. He should write a book on how to be successful in business. _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Can't find the drum machine article - they built one as part of a contest with Flash Coders NY - source code here - check out the ToneGenerator and the specific SawGenerator etc.
These are probably okay for simple "one" off sounds, but if you are building complex waveforms - e.g. adding lots of waves together at a certain frequency, you may be better off building a wavetable then reading sample values by interpolating - simple weighted addition of 2 samples indexed from an array. If you want some C++ code, then I can dig it out for you, but the PCMAudioLibrary looks adequate...
You would have thought that FlashPlayer would have noise generators built in for sound - they have them for images which have an extra dimension, so are usually more processor intensive - c'mon Adobe, gimme some audio tools already.
Andreas R wrote: > Out of curiosity, what are the "right" ways to calculate oscillations > like triangle, sawtooth and pulse? Ideally oscillation would work in > parallel with sine, so when sin=1, triangle=1, taking radians as the > frequency parameter.
Uh, you could implement easing but I'm of the same opinion as Steve here where it wouldn't make any sense to kill an ant with a sledgehammer. At any rate, the easing would be based off a timer instead of frames. Pseudo code AS2 using the Tween class would be:
var interval:Number = setInterval(this, 'showProgress', 100);
function showProgress():Void { new Tween(scope, 'property', Easetype, currentVal, newVal, 0.1, true);
}
You could change the interval and have the Tween's seconds be either equal to or less than the interval.
[mailto:flashcoders-boun...@chattyfig.figleaf.com] On Behalf Of Steven Sacks Sent: Monday, August 06, 2007 2:38 PM To: flashcod...@chattyfig.figleaf.com Subject: Re: [Flashcoders] Coding a circular preloader
Easing? You're showing linear data. A visual representation of a number from 0-100. I'm not sure how easing fits into this.
Your boss sounds like a real genius because it's absolutely brilliant to force somebody to spend many hours building something that could be built in 5 minutes - really smart use of time and money. He should write a book on how to be successful in business. _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
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.....
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. _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
I'm not sure what you mean. What don't you have? The pseudo code I posted is fairly easy to implement. If you're using the drawing API to render your circle or partial circle, just tap into the Tween class' onMotionChanged event to update your vector shape.
[mailto:flashcoders-boun...@chattyfig.figleaf.com] On Behalf Of Omar Fouad Sent: Monday, August 06, 2007 5:09 PM To: flashcod...@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.....
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. _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
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 (r...@formequalsfunction.com) - 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};
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;
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 ];
[mailto:flashcoders-boun...@chattyfig.figleaf.com] On Behalf Of Omar Fouad Sent: Monday, August 06, 2007 2:09 PM To: flashcod...@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.....
----- Original Message ----- From: "Steven Sacks" <flash...@stevensacks.net> To: <flashcod...@chattyfig.figleaf.com> Sent: Monday, August 06, 2007 8:38 PM Subject: Re: [Flashcoders] Coding a circular preloader
> Easing? You're showing linear data. A visual representation of a number from 0-100. I'm not sure how easing fits into this.
> Your boss sounds like a real genius because it's absolutely brilliant to force somebody to spend many hours building something > that could be built in 5 minutes - really smart use of time and money. He should write a book on how to be successful in > business.
+10 ;-)
when I visited the site mentioned I didn't see any easing at all (I'm on a 20mbit conn).
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 );
[mailto:flashcoders-boun...@chattyfig.figleaf.com] On Behalf Of Jesse Graupmann Sent: Monday, August 06, 2007 4:24 PM To: flashcod...@chattyfig.figleaf.com Subject: RE: [Flashcoders] Coding a circular preloader
Assuming you have Tweener in the same directory, you can copy and paste this example.
- JG
-----Original Message----- From: flashcoders-boun...@chattyfig.figleaf.com [mailto:flashcoders-boun...@chattyfig.figleaf.com] On Behalf Of Omar Fouad Sent: Monday, August 06, 2007 2:09 PM To: flashcod...@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.....
> Assuming you have Tweener in the same directory, you can copy and paste > this > example.
> - JG
> -----Original Message----- > From: flashcoders-boun...@chattyfig.figleaf.com > [mailto:flashcoders-boun...@chattyfig.figleaf.com] On Behalf Of Omar Fouad > Sent: Monday, August 06, 2007 2:09 PM > To: flashcod...@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.....
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. _______________________________________________ Flashcod...@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Been using CS3 for a bit now, getting to grips with AS3, and what feels like excessive handholding at first is now flowing naturally, and i feel far less prone to silent failures than before. To me this is entirely excellent, good show!
The IDE however, i am less impressed with, and i am hoping to be wrong or ignorant so some of you can correct me in my ridiculous ways.
Overall, i feel as though AS3 integration in the Flash 9 IDE appears tacked on, or retrofitted. Experimenting with AS3 early on in flex and with apollo gave a far, far stronger impression of the strengths of the language than how it appears when used in tandem with the IDE, particularly in how AS3 handles sound and the library.
AS3's substitution of attachMovie for the movieclip constructor is, while logical on the surface, somewhat baffling to me in practise. In AS2, extending MovieClip required you to declare variables to gain references to clips already instanced in the library movieclip. For instance, extending a movieclip containing a textfield with instance name "nameField" would require var nameField:TextField to gain control of that field in the class. What this gives you on script level is an overview of relevant movieclip members, as well as code completion. In AS3, declaring variables to refer to hand placed movieclip members throws an error:
1151: A conflict exists with definition x in namespace internal.
This effectively forces us to write notes about movieclip members in comments or the like, and denies us code completion. I'm not sure how i'd deal with this more effectively, but i do sorely miss being able to do this in the old fashioned way. If there is a faster, more convenient workflow, please inform me :)
Secondly, where the Timer class allows us a "safe" way to programmatically trigger callbacks without the setInterval danger of orphaned intervals, the new Sound/SoundChannel symbiose allows us to freely orphan sounds, while forcing us to keep track of separate class instances to have specific control of individual sounds, easily lost should the reference to the relevant SoundChannel be overwritten.
The current sound toolkit appears eclectic, almost chaotic, and in my opinion performs even worse than its previous incarnation
Sound: Loads and plays streamed audio, provides close() method to stop streaming sound, dispatches events to keep track of load progress, takes a soundtransform instance SoundChannel: gives playback and level information and an event when sound playback ends. Contains another method to stop sound, which DOESN'T work for streamed sound, yet a SoundChannel instance is nonetheless required to alter properties of streaming sound during playback. SoundTransform: Encapsulates all pan and volume properties previously associated with the Sound class. SoundMixer: static class containing global methods and properties for all sounds.
Out of these 4, the Sound/SoundChannel relationship with their dual stop methods makes me wonder what the rationale behind it all really was. The SoundChannel class in my opinion has no logical place in the hierarchy given that it doesn't actually give us any real control of the channel in question. Were we able to declare a SoundChannel and pass it Sounds to play it'd be a different matter. In addition, the name SoundMixer is a complete misnomer, as the class offers absolutely no channel-specific controls, nor does it keep track of currently playing channels.
I applaud being able to source audio externally, but i'm bewildered by the choices of terminology and the weird sound/channel symbiose. The docs insist the API is powerful, but i don't see how it is, aside from external sourcing of audio.
So overall, i enjoy AS3, but its integration with IDE workflow seems unfinished and awkward.
Anyone want to correct me? Please? :)
-- mvh
Andreas Rønning Senior Flash developer ----------------------------- Rayon Visual Concepts
> AS3's substitution of attachMovie for the movieclip constructor is, > while logical on the surface, somewhat baffling to me in practise. In > AS2, extending MovieClip required you to declare variables to gain > references to clips already instanced in the library movieclip. For > instance, extending a movieclip containing a textfield with instance > name "nameField" would require var nameField:TextField to gain control > of that field in the class. What this gives you on script level is an > overview of relevant movieclip members, as well as code completion. In > AS3, declaring variables to refer to hand placed movieclip members > throws an error:
> 1151: A conflict exists with definition x in namespace internal.
When using classes, go to your publish settings, actionscript, and turn off "automatically declare stage instances" and it should behave as it did before -- you'll need to declare stage instances yourself. I agree that's odd, I use it off, but I guess they decided to add it on by default is so beginners wouldn't have trouble dealing with elements when coding 'on the timeline'.
>> AS3's substitution of attachMovie for the movieclip constructor is, >> while logical on the surface, somewhat baffling to me in practise. In >> AS2, extending MovieClip required you to declare variables to gain >> references to clips already instanced in the library movieclip. For >> instance, extending a movieclip containing a textfield with instance >> name "nameField" would require var nameField:TextField to gain >> control of that field in the class. What this gives you on script >> level is an overview of relevant movieclip members, as well as code >> completion. In AS3, declaring variables to refer to hand placed >> movieclip members throws an error:
>> 1151: A conflict exists with definition x in namespace internal.
> When using classes, go to your publish settings, actionscript, and > turn off "automatically declare stage instances" and it should behave > as it did before -- you'll need to declare stage instances yourself. I > agree that's odd, I use it off, but I guess they decided to add it on > by default is so beginners wouldn't have trouble dealing with elements > when coding 'on the timeline'.
