Beginner needs help coding his live day night animation

[Dave8585]

hi
i made a cool floating cloud animation wich i want to add some code to change the background to day or night depending on the intern windonws clock... so for example

if it is 06-21 o clock i want the background image to be day image 1...
if the time is 21:01 -05:59 i want the background image to be night image 2....

i already googled for hours but all i could find was css or javascript and im a total beginner with coding so im not sure how to use it with action script...

i found alot of ways to get time and hours ( also on adobe documentation) 
but im not sure how to use all these codes...
this  here should basically do what i want... 
https://www.webdeveloper.com/d/194549-loading-different-images-based-on-time-of-day
i applied this code to the  global script section but when i test it inside the broswer,  it just shows me a blank screen with a broken image logo with text DJimage ..
i changed all file names and path accoringly to my stuff but still doesnt work...

i also tested to put the code on the background layer or the background object and then nothing happens at all .. .i get the normal animation inside my browser...
can anybody point me in the right direction ?

any help would be appriciated.
thanks alot 
dave

[kglad]

are you sure you want actionscript (for an as3 project), and  not javascript for an html5/canvas project?

are both backgrounds movieclips and on-stage with instance names?  (they should be to make it easier to code).

[Dave8585]

it doesnt matter to me in what language 😄 i dont really know about any language...

no the background is a normal image, the code i wanted to use is for normal images i thought... 

var DJimages = [  // add path to directory if necessary
   "DJimage1.png",  
   "DJimage2.png"
   // NOTE: no comma after last entry
];
function TODimage() {
  var now = new Date();
  hr = now.getHours();                               // alert(hr);  // for testing
  var DJ = 2;                                               // 21 bis 06
  if ((hr >= 6) && (hr < 21)) { DJ = 1; }   // 06 bis 21
  document.getElementById('DJimage').src=DJimages[DJ];
  document.getElementById('DJimage').alt = DJimages[DJ];
}

[Dave8585]

https://www.youtube.com/watch?v=xPXwlDOCVjo heres the animation loop i created and want to use , this is the night part..

[kglad]

it matters to animate which language you use which depends on what kind of project you're creating. 

from the code you showed, you're using javascript for an html5/canvas project and that code should work, IF you set everything up correctly and you're willing to accept the user's system clock to determine tod.

[Dave8585]

but it doesnt work... thats why im asking here...
how should it be setup? if u try to help some information instead of just confirming what i already know would be awesome LOL

should the code be inside of global script or where? 

[kglad · Accepted solution]

what you're trying to use is too complicated for a novice.  use my previous suggestion and add both images to the stage.  convert each to a movieclip (right click each>click convert to symbol>movieclip). assign each an instance name (in the properties panel). eg, day_mc and night_mc.

you can then use:

this.day_mc.visible=false;

this.night_mc.visible=false;

TODimage.bind(this)();

function TODimage() {
var hr = new Date().getHours(); 
if ((hr >= 6) && (hr < 21)) {

this.day_mc.visible=true;

} else {

this.night_mc.visible=true;

}
}

[Dave8585]

thanks alot after fiddling around for a while i got it too work :D:D:D

i had to put the code on the layer where the background imageys was on... in my case i first had two layers for the background... one for day and one for night... combining these two layers and then adding the code to the first frame of this layer did the job 😄

BUT it doenst change automatically i have to press test or load the html file again so the changes takes affect...

is there a way to auto change it?

1. does the actual file name is important too? i just renamed the instances to mcday mcnight...
2. where exactly i need to  put the code? on global script?
3. shoul dthe images be on a layer or just inside the file libary 

[Dave8585]

ignore the last three question,  they are old i didnt wanted to post them 😄

[Dave8585]

thanks again i noticed it will change automatically too :D:D thats awesome...

sorry to bother u again but i got one more question
is it possible to code a motion tween so its positon is based on the hour?

really want to add a transparent gardient with sunset, night, day and sunrise colors...

either it should scroll up and down ...

with a image like this https://www.designspiration.com/save/96017980108/

or it wil scroll down from the top trough the bottom (similiar like the clouds looping) 
with a huge looping image like this https://codepen.io/bork/pen/wJhEm

with these techniques  theres a slow animation over the whole day...  instead of a hard switch just at night...

not sure wich way is easier to code...

is this very hard to code? what i should look for? 😄

[kglad]

it is possible but my guess is this is that this is going to require too much from you.  but if you want to try you'll need to create whatever object (eg, gradient_mc) you want to scroll and you'll need to convert time to the y position of that object (done in hr_to_yF):

TODimage.bind(this)();

function TODimage() {
var hr = new Date().getHours(); 

createjs.Tween.get(this.gradient_mc).to({y:hr_to_yF(hr)}, 1000);

}

function hr_to_yF(hr){

_y = ...//whatever 

return _y

}

[Dave8585]

thanks, u def right its too hard for me i really want to learn a lil bit of java for this!

i made a new layer on top with a image, converted to movie clip instance name gradient_mc...
i created the motion tween and i was not able to add the code... 

but when i created a normal tween i was able to enter the code for this layer/frame...

but when i test it it just plays the normal animaton ...
do u know what i might have done wrong?
or do i need to add more times to ur code so it works? - where it says whatever...

thx

[kglad]

the code i suggested contains a tween.  you just need to figure out how your want to convert hours to y position and put that in the hr_to_yF() function.