To make the welcome page for my website I had to use a program called Adobe Edge Animate. I first placed the images onto the canvas. I learnt the technique from this video. https://www.youtube.com/watch?v=PpvmKRb1rSQ
The way this works will be that each image will fade from 0% opacity to 100% opacity one after another. This should give the effect of the page having a video background.
I realised I could just copy and paste these transitions and invert them if needed. So now it was just a matter of getting them into the correct order.
Here you can see a step by step of the correct order. This is about half way through the animation. The purple layer you can see fades out while the black layer (in pink) fades in. After that the black will fade out while the next image fades in from 0 opacity.
Now 4 seconds further along the timeline I copied a transition and pasted it. I inverted the transition so it was now 100% to 0%.
Now you can see it is 100% to 0%.
I did the same for the black box except this was 0% to 100% so it would fade in.
Using copy and paste I set the black to go back to 0% and set the next image to fade in.
Moving along 4 more seconds I have added in the transition to fade the black in again.
I copied another transition and pasted it onto the correct image, setting it to fade 100% to 0%
This is now the end of the animation. I needed it to loop on the page so I had to search Google on how to do this.
I found a usefull article here on the subject. http://www.cyprich.com/2012/09/05/how-to-create-a-loop-in-adobe-edge-animate/