This is just going to be a fun little post, and a nice little takeaway to boot. The main reason why I did this was that I needed a new delay icon .. and for some reason I really love the facebook one on my android.
It’s just quite stylish!
The spinner is just a circular collection of 16 assets that we are going to turn into a phased spinny train around the circumference. This looks very different from just spinning the complete asset, it means one asset starts at full visibility then we phase it to invisible but when it reaches a certain % opacity we start the next one off and so on.The assets are sitting on top of static vector versions so the effect is … well, it’s spinny.
So whats the big deal you ask? There isn’t one really, I could probably have made this in about 20 minutes with a few timeline tweens or just used some Greensock tweens on a yoyo. But NO I say, NO GODAMMIT ! I wanted to do it this way, fully configurable, so I did, plus it’s much more fun.
As for most of these posts I am going to work on the timeline for speed, and of course I do urge you to make an OOP version of this too.
The spinny will have a start method and a stop method which will also phase the whole spinner in and out. And finally I wanted to add a bit of extra goodness by throwing in a custom event to mark to completion of the spinner. OOh, that’s exciting!
There are hundreds of samples of custom events out there so mine will be very brief and to the point. To create a custom event for an object we need to do 3 things. THREE !
1. Create the event – give it a name
2. listen for the event being dispatched by the object
3. Dispatch the event when we need to to be caught by the listener.
Now, how easy is that? You have got to love the event model!
var MyNewSexyEvent:Event=new Event("finished",false,false); // the other two args are for bubbling and cancelling
I have a new event inside my spinny clip, it is called “finished”
The parent of the spinner is given a listener to wait for this event, where it will run a function called fin.
dispatchEvent(MyNewSexyEvent); // really that’s all it takes and the parent will pick it up and run the code assigned
Some people might be saying – why bother, whats the big deal ? I could do that just by calling the function directly when I need to, couldn’t I ? And the answer is yes, as always there are with flash many many ways to accomplish the same tasks. I personally like the cleaness of events, I am not hardcoding a particular requirement for a function somewhere instead I am sending out an event that might be picked up in many different places for many different reasons.
An example might be where we want to despatch an event in a battle game the event being “HitByArrow” from our main character and we want the UI to catch this to say “Ow !!!” but we also want the scores component to catch the event too so I can decrease my health, so I despatch the event after having set up two listeners and they will pick it up. If I later want to listen for the arrow again, to see if my armour plating has been dented I can quickly listen for the event …. WIthout having to go back in and change the code inside my man object ever again – ahhhhhhh the mist lifts, the light shines in.
You can also do other stuff with these, custom arguments, but I don’t really bother, within the listener defined function when the event is dispatched the function passes over a reference to the events object and we can access this via event.target and pick up any values we might need from there.
Back to the spinner – the example fla file is pretty simple: The root, the buttons MC and the spinner MC. The but MC has three stages in frames Start/Stop/waitForEnd, start is the first framer and is the start button, this just runs the start function on the spinner and then moves the button interface to the next “Stop” frame. Clicking Stop does the same sort of thing, tells the spinner to stop and then goes to the third empty frame to wait for the completion of the spinner.
Frame three also sets up a listener to wait for the spinner complete event and then traces out a message and moves the but MC back to the start position again. Just as an example I have set up 2 listeners for the event and one demonstrates grabbing an entity form the event.target reference.
So that’s it then …. what? You want to know about the spinner too ?
I have commented the code and it should be pretty clear what is happening here. So go and play and figure it out and maybe start to think of your own spinner designs.