Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Imagine Admin
9th April 2010

Create a 3D flip clock preloader

Add a bit more to your website’s first impression by creating a unique 3D preloader utilising Flash CS4’s 3D Rotation capability and ActionScript 3

Create a 3D flip clock preloader

Add a bit more to your website’s first impression by creating a unique 3D preloader utilising Flash CS4’s 3D Rotation capability and ActionScript 3

A website’s preloader is the very first impression people get when they visit it so you should really endeavour to make it look the best you can in order to captivate their attention right away. There is nothing worse than waiting for a highly anticipated website to load up and be staring at something really boring. Well, we will be doing the exact opposite of this!
Together we will create an impressive 3D flip clock loader which will also react to your mouse movements. By offering a compelling experience right from the beginning, not only will you be more likely to engage your visitors before the site loads up but you will also show you care about attention to detail. There is a little bit of work to do but we will be going over some useful techniques from which everyone should benefit.

This tutorial originally appeared in Web Designer issue 162, authored by Lubos Buracinsky. Project files may be downloaded here

01 Getting started

Create a 3D flip clock preloader

Open start.fla from the cover CD. From the library, drag Movie Clips “number9” – “number0” onto the stage on top of one another into one layer. Give each of them an instance name of “n0”, “n1”, “n2” etc according to the number it represents. Next, align them all to the centre. With all selected, press F8, convert them into a Movie Clip called “NumberSet” with registration point in the middle.

02 Duplicate

Create a 3D flip clock preloader

Select the “NumberSet” Movie Clip and duplicate it twice. Place them in a row one next to another with approximately 5px space between each. Next, name the instances from right to left “ones”, “tens”, “hundreds”. Again, select all three instances, press F8, select Movie Clip, name it “counter” with registration point in the middle and give it an instance name of “counter”.

Pages: 1 2 3 4

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.webdesign-gm.co.uk Adam Web Design

      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!

    • http://moonupinfotech.com Pooja

      Hi,
      I like this preloader.preloader is very attractive.

      Thank you sharing this information with us.

    • Julio Nazario

      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?

    • http://webme.co.il leon

      why there isnt any demo link in any post?…

    • deniz

      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.

    • Pingback: “Flip clock” Flash tutorial – Web Designer 162 | Striker Multimedia | Creative Agency / Blog

    • http://www.strikermultimedia.com Lubos Buracinsky
    • http://www.strikermultimedia.com Lubos Buracinsky
    • http://pf.xactscripts.com Usman Arshad

      Nice, thankyou!

    • http://www.octaminds.com web designer philippines

      Thanks for a great tutorials.

    • http://www.webdesignermag.co.uk/blog/3d-flip-clock-preloader/3/ hugh rycroft

      I dont understand the flipping the ones part how do you do it? Or is there somewhere to download the finished flash file?

    • Odell

      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.

    • jean

      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?