Image Overlapping - action script 3 / adobe flash / adobe animate - actionscript-3

Question

I am working on a project which is loading png(png1) on run-time in front of another png(png2) image(which is placed earlier)
I have done this and it is working properly, the problem is after some time png1 transparenting to the background even the png2 placed in middle of png1 and background, bellow i have attached screenshots of the issue and the code.
import flash.net.URLLoader;
import flash.net.URLRequest;
var fl_TimerInstance: Timer = new Timer(1000);
fl_TimerInstance.addEventListener(TimerEvent.TIMER, fl_TimerHandler);
fl_TimerInstance.start();
var fl_SecondsElapsed: Number = 1;
function fl_TimerHandler(event: TimerEvent): void {
var imageLoader: Loader = new Loader();
var image: URLRequest = new URLRequest("C:\\Users\\Public\\Pictures\\pic.png"); //png1 = pic.png
imageLoader.load(image);
Zerolocation.addChild(imageLoader);
}
ScreenShots:
Before Error - https://drive.google.com/file/d/19a0t2jEGfDoX2voQ96rap4XpvDlGMWBd/view?usp=sharing
Error - https://drive.google.com/file/d/1a--EIEXz2Qzt5SBfl8Y8SxDIAG3DkYZf/view?usp=sharing
Timeline - https://drive.google.com/file/d/1s2uPSpOYAcfEJqdNqD4QpDGla8Gvs5LC/view?usp=sharing
It would be much appreciated if anyone can give me a clue about what is wrong the with this.

Answer 1

You need to replace your png1 each time you load a new file. Best if you'd check if the file is still the same so not to download it again and again each second. The reason of why does the png2 stop being displayed is exactly because you have too many transparent layers in front of png2. I recall having 24 pictures with alpha channel on top of each other caused me to lose some background that would otherwise be visible. To solve your issue I say you add a Sprite container in front of your png2 layer wise, then you could just clear all the children of that container to remove obsolete imageLoaders, then add your newly downloaded picture. Something in line of this:
// Zerolocation has a child named "runtimePic" to place loaded pics
var didWeLoad:Boolean=true;
function fl_TimerHandler(event: TimerEvent): void {
if (!didWeLoad) return; // why downloading more while we haven't finished?
var imageLoader: Loader = new Loader();
var image: URLRequest = new URLRequest("C:\\Users\\Public\\Pictures\\pic.png"); //png1 = pic.png
imageLoader.load(image);
imageLoader.addEventListener(Event.COMPLETE,loaded);
didWeLoad=false;
}
function loaded(e:Event):void {
didWeLoad=true; // allowing more downloading
e.target.removeEventListener(Event.COMPLETE,loaded); // clean up, or else you'll leak memory
// remove old pic(s)
Zerolocation.runtimePic.removeChildren();
// and now add new pic
Zerolocation.runtimePic.addChild(e.target);
}
Be warned, this code does not handle downloading errors.