quinta-feira, 15 de abril de 2010

Create a 3D flip clock preloader

finalimage_05

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


step1


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


step2


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”.

Nenhum comentário:

Postar um comentário