Create a 3D flip clock preloader
11 Flipping 10s
11 Flipping 10s
For the 10s, we undertake a similar process as for the ‘Flipping the 1s’ with the difference that we initially only set the right depths of two visible numbers and then we repeat the tween functions with different variables. We don’t have to worry about the rest of the depths. The full code for this step can be found within the project files.
12 Flipping 100s part 1
In a similar approach to the previous flipping, we’ll divide this into three sections; for ones, tens and hundreds. First of all we will be checking whether the current value on the “ones” is 0. If so, nothing happens. If not we execute the exact same process as in the first instance (Flipping 1s) to start rotating/swapping depths, while at the same time keeping in mind the back number will be 0, ie the “n0” becomes active. The full code for this step can be found within the project files, labelled for step 12.
13 Flipping 100s part 2
The very next step will be to do exactly the same thing for the “tens”. Apart from variables (these need to refer to the Movie Clips inside “tens”), the code will stay exactly the same as before. The full code for this step can be found within the project files, labelled for step 13.
14 Flipping 100s part 3
Finally, with no further checks, we easily flip 0 with 1 in “hundreds” using the exactly same code, again just changing the reference to the numbers inside “hundreds” Movie Clip. We are done!
//—————-hundred—————-
var lastHundredTween:Tween = new Tween(hundred
s.n0.Top, “rotationX”, Regular.easeIn, 0, 90, flipSpeed,
true);
lastHundredTween.addEventListener(TweenEvent.
MOTION_FINISH, continueLastHundredTween);
var lastHundredTween2:Tween = new
Tween(hundreds.n1.Bot, “rotationX”, Regular.easeIn,
180, 270, flipSpeed, true);
function continueLastHundredTween() {
hundreds.swapChildren(hundreds.n0, hundreds.n1);
var lastHundredTween3:Tween = new Tween(hundreds.n0.Top, “rotationX”, Regular.easeOut, 90, 180, flipSpeed, true);
var lastHundredTween4:Tween = new Tween(hundreds.n1.Bot, “rotationX”, Regular.easeOut, 270, 360, flipSpeed, true);
};
}
function setPositions():void
{
var rest:Number = 7;
ones.setChildIndex(thisOne, 9);
ones.setChildIndex(nextOne, 8);
for(var i:Number = 0; i<=9; i++){
var tempObject:DisplayObject = ones[“n”+i];
if((tempObject != thisOne) && (tempObject != nextOne)){
ones.setChildIndex(tempObject, rest);
rest–;
}
}
}
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
Really impressive stuff. Definitely something i’d like to use in future projects. Would work really well as a scoreboard effect for a sport related site!
Hi,
I like this preloader.preloader is very attractive.
Thank you sharing this information with us.
I have the book that contains this tutorial. I have finished the preloader but now I want to add it to my page. If it is possible can you tell me how to code the preloader on the main control .as file?
why there isnt any demo link in any post?…
i guess it would be perfect to have a video of this .. and of all others.. so it could help us more.but altought everything, its a perfect workout.
live demo here
http://www.strikermultimedia.com/blog/2009/10/web-designer-magazine-162-flash-flipclock-tutorial/
:)
if the link doesn’t work for you, try this one:
http://www.blog.strikermultimedia.com/2009/10/web-designer-magazine-162-flash-flipclock-tutorial/
:)
Nice, thankyou!
Thanks for a great tutorials.
I dont understand the flipping the ones part how do you do it? Or is there somewhere to download the finished flash file?
This is unfortunately a rather poorly-constructed tutorial. You’ve left out a couple of small parts that are confusing and just blatantly left out where to put the code for flipping the 1′s and 10′s and such. The tutorial just simply ends with no real good depth on explaining everything properly. Please redo this properly.
Many thanks for this tutorial
Would you be so nice as to tell me how to attach this preloader to my project “index.fla”, please?