How do I Transition Between Two Repeating Tiled Backgrounds?

I have two tiled backgrounds which repeat multiple times, then a "transition" background which should connect the two:

Initial Tiled Background 1:

http://artjumper.x10host.com//images/Background.png

Transition Image:

http://artjumper.x10host.com/images/Van%20Gogh%20BG1.5.png

Final Tiled Background

http://artjumper.x10host.com/images/Van%20Gogh%20BG2.png

Game Example:

http://artjumper.x10host.com/

I've done a good amount of research trying to find the best practice for doing so and it seems as if most of the tutorials and threads mentioning it are dead/gone - so it seems like a good time to bring this up and hopefully it is helpful to the community as well.

Dead Examples:

Please let me know if you have any questions - tips, links, videos or just general suggestions are appreciated.

Capx:

http://artjumper.x10host.com/example.capx

I can't look at your project because I'm at work, but I did play your example of the game and look at your backgrounds...

You should be able to simply create the transitional instance and align it's position to the normal background using;

set x position transition.object

set y position transition.object

-> to background.x+background.width

-> to background.y

This will simply "tag" it onto the end of your background as it scrolls along... once you are ready for the transition that is. I'm not sure how you're triggering the requirement for the actual transition, but let's say it's score based or time based... when the score or time reaches the desired amount, use this to trigger the creation of the transitional layer... it will already be in position (at the end of the current background).

Once the transition has left the screen by (0-transition.width) then you can create the next background to appear in the same way.

Hopefully that made some kind of sense

~Sol