Sky changing due to time

From Whirled Club Wiki
Jump to: navigation, search
Flash Tutorial
Create a sky that changes due to time.
Difficulty Level
Beginner
Requirements
Icon-Flash.png Adobe Flash CS3/CS4/CS5
Other Information
Example file: Example zip

Effecting Items using times (AS3 using the FAT)

Set up of the sky in Flash CS4.

Creating a sky that changes color depending on the time of day is a simple task once you understand how to read date objects.

First, lets start by drawing our sky. Create a new movieclip to hold your sky animations. Once done, name it what you like. Your sky can be shape tweened like mine to make smooth transitions between the times. My sky animation lasts 24 frames because there are 24 hours in the day. Drag the sky movieclip from the library to the stage in it's own layer, open the properties panel (hotkey: ctrl +F3) and give it an instance name of "sky" (without the quotes)











Scripting

Now the all important action script. This script has no calls to whirled's date object, so it will work outside of whirled. Create a new layer and name is "Actions". Copy and paste the following code into the actions panel (hotkey: F9)

<actionscript> //State your varibles, in this case the date and hours of the day var myDate:Date = new Date(); var hours = myDate.getHours(); //Pull the time from our date object, and react accordingly. //Flash measures time from 0 to 23, 0 being midnight //The frame numbers I'm stopping at might have to be changed depending on the way your animation is set up if (hours == 0){ sky.gotoAndStop(1); } if (hours == 1){ sky.gotoAndStop(2); } if (hours == 2){ sky.gotoAndStop(3); } if (hours == 3){ sky.gotoAndStop(4); } if (hours == 4){ sky.gotoAndStop(5); } if (hours == 5){ sky.gotoAndStop(6); } if (hours == 6){ sky.gotoAndStop(7); } if (hours == 7){ sky.gotoAndStop(8); } if (hours == 8){ sky.gotoAndStop(9); } if (hours == 9){ sky.gotoAndStop(10); } if (hours == 10){ sky.gotoAndStop(11); } if (hours == 11){ sky.gotoAndStop(12); } if (hours == 12){ sky.gotoAndStop(13); } if (hours == 13){ sky.gotoAndStop(14); } if (hours == 14){ sky.gotoAndStop(15); } if (hours == 15){ sky.gotoAndStop(16); } if (hours == 16){ sky.gotoAndStop(17); } if (hours == 17){ sky.gotoAndStop(18); } if (hours == 18){ sky.gotoAndStop(19); } if (hours == 19){ sky.gotoAndStop(20); } if (hours == 20){ sky.gotoAndStop(21); } if (hours == 21){ sky.gotoAndStop(22); } if (hours == 22){ sky.gotoAndStop(23); } if (hours == 23){ sky.gotoAndStop(24); } </actionscript>

Test and enjoy your changing sky. If you use this tutorial please attribute to [1] Thank you very much.