A query related to ProgressBar and its placing inside Container

Question

Hi ,
I tried an example with  Flex3 ProgressBar .I am posting the scenario in which it was correct in one case and wrong in another case .
Please tell me what  is wrong here in the wrong case :
The Program is related to :
I have button on click of that i will be loading the Image . There is no Button and its event Listener Mentioned here .
Correct Approach :
This works fine as the Image and ProgressBar are in the same Container called HBox
<mx:HBox>
<mx:Image id="image" autoload="false"/>
<mx:ProgressBar id="MYPB" source="{image}"/>
</mx:HBox>
Wrong Approach :
The below isn't working as i placed ProgressBar outside the container called as HBox
<mx:HBox>
<mx:Image id="image" autoload="false"/>
</mx:HBox>
<mx:ProgressBar id="MYPB" source="{image}"/>
Please share your ideas as why this behaves this way .

Answer 1

Hi Kiran.
I don't think either of the approach is wrong , it no way effected by placing the ProgressBar inside a container or outside the container.
Run the sample application below. It will load for both approaches.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
        <![CDATA[
            public function loadImage1():void {
              image1.load('assets/liazon_logo.png');
            public function loadImage2():void {
              image2.load('assets/liazon_logo.png');
        ]]>
    </mx:Script>
<mx:HBox>
  <mx:Image id="image1" autoLoad="false"/>
</mx:HBox>
<mx:ProgressBar id="MYPB1" source="{image1}"/>
<mx:Button label="Load Image1" click="loadImage1()"/>
<mx:HBox>
  <mx:Image id="image2" autoLoad="false"/>
  <mx:ProgressBar id="MYPB2" source="{image2}"/>
</mx:HBox>
<mx:Button label="Load Image2" click="loadImage2()"/>
</mx:Application>
If this post answers your question or helps, please kindly mark it as such.
Thanks,
Bhasker Chari