Flash time-lapse headers

Create a Flash header scene which animates according to your system clock

Tired of the looped animations or static design of your site headers? Here is your chance to create something which will be different at every visit!

When you design something, you are usually happy with it for some time. After a while though, you start thinking about changing things so people don’t always see the very same thing and inevitably get bored. To avoid such a scenario, let’s have a look at creating a scene where you can guarantee it will be different every single time users will visit it. To make it happen in a dynamic manner, we will be counting on one variable which is constantly different upon users’ every visit and that is time factor. Together, we will create a scene which animates according to different times of a day, ie into night at night, into day during the day and of course into states in-between noon and midnight. Once you go through the tutorial, it will be only up to you whether you recreate the scene in the same, illustrated fashion or you go for something rather more realistic such as photograph cutouts or so on – the techniques and principles remain exactly the same.

Project files for this tutorial can be downloaded here.
This article was originally authored by Lubos Buracinsky, and featured within Web Designer issue 164

01 Getting started

Open start.fla from the project files. Inside the library
from the MCs folder, drag the Movie Clip ‘sky day’ onto the stage and name the layer ‘sky day’. Create a new layer, name it ‘sky night’ and from the library drag the Movie Clip ‘sky night’ to it. Next, give it an instance name of ‘nightSky’.

02 Add depth

Create a new layer, name it ‘hillsDay’ and from the library drag MC ‘hillsDay’ to the stage. Give it an instance name of ‘hills’. Create a new layer called ‘farm’. Drag the MC farm  to the stage and give it an instance name of ‘house’. Also give an instance name of ‘windows’ to MC ‘windows’ and ‘building’ to the Movie Clip ‘building’ inside the farm MC.

03 The Sun and the Moon

In the main timeline, under the hillsDay layer, create a new layer and call it ‘Sun&Moon’. From the library, place Movie Clips of ‘Sun’ and ‘Moon’ on the timeline, align them to the middle, the order should not matter. Give both instances names of ‘Sun’ and ‘Moon’ accordingly. Add a little glow filter to each.

Pages: 1 2 3 4