Question

Got solution – See bottom of the post

Just want to know if there is any problem if I give negative -y coordinates to the child elements? In my project when I do it it behaves very awkwardly.

In my flex 3.5 project I have extended Canvas class. In this class I will have one children (Image) which I load dynamically and set the x, y position to adjust the offsets which usually -x and -y values. Up to this no problem. Now when I try to add another child with -y value dynamically it shrinks the canvas and shows a very small rectangle (without shrinking image sizes)

And also I noticed that Canvas height property is 0 even after adding the 1st image.

Does anyone know what problem it is?

* Edited: Source code added below *

public class WorldElementView extends Canvas {

    private var mainAsset:UIComponent;
    private var shopItem:ShopItem;
    private var map:WorldMapView;
    private var loader:Loader;

    private var timer:Timer;
    private var readyToCollect:Boolean = false;     
    private var loadingUserData:Boolean = false;        
    private var collectionImage:Image;

Removed lot of variables which doesnt make sense in the context

    public function WorldElementView(m:WorldMapView):void{

        map = m;
        mainAsset = new UIComponent();
        loadAsset();        
    }

loadAsset() is called to load the main asset which is loading fine

    private function loadAsset():void{

        loader = new Loader();
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadComplete);
        loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onLoadError);
        loader.load(new URLRequest(GameConfig.ASSET_IMAGE_PATH + shopItem.ImagePath)); 

    }

all values in the internal variables are correct,
// event handlers
private function onLoadComplete(e:Event):void{

        loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,onLoadComplete);
        loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR,onLoadError);
        addEventListener(MouseEvent.CLICK,onClick);


        var bmp:Bitmap = LoaderInfo(e.target).content as Bitmap;
        //*****NEW CODE****//
        this.height = bmp.height + 20;
        this.width  = bmp.width;

        bmp.x+=shopItem.OffSetX;
        bmp.y+=shopItem.OffSetY;

        mainAsset.addChild(bmp);
        addChildAt(mainAsset,0);
        setDimensions();

        initTimer();

        dispatchEvent(new GreenRevEvent(GreenRevEvent.WORLD_ELEMENT_INITIALIZED));
    }

initTimer() is called to initiate the timer

    public function onLoadError(e:IOErrorEvent):void{

        loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,onLoadComplete);
        loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR,onLoadError);

        Alert.show("Error loading world!" + e.toString());
    }

    private function initTimer():void{

        var interval:int;
        // *** LOGIC to determine "interval"
            interval = 10000; // hardcoded to 10 seconds
            timer = new Timer(interval,1);
            timer.addEventListener(TimerEvent.TIMER,onTimer);
            timer.start();
    }

Not much here, just setting up the timer

    private function onTimer(e:TimerEvent):void{
        readyToCollect = true;
        showCollectIcon();
    }

Problem is below function look at inline comment

    private function showCollectIcon():void{

        if(!collectionImage){
            collectionImage = new Image();
            collectionImage.autoLoad = true;
            collectionImage.source = GameResource.imgCollect;
            collectionImage.y = -20; // **** THIS BEHAVES AWCKWARDLY ****

            addChild(collectionImage);
            collectionImage.filters = [new GlowFilter(0x0000ff,1,10,1,1)]
            collectionImage.mouseEnabled = false;
            collectionImage.visible = false;
        }

        collectionImage.visible = true;
    }
}

If I comment out the below line every thing works fine but the problem is that I need to place the icon just above top of the main image

   collectionImage.y = -20;

Solution

The issue was with setting the dimensions of the parent canvas.
I have added this line in onLoadComplete() function

        //*****NEW CODE****//
        this.height = bmp.height + 20;
        this.width  = bmp.width;

Regards

Answer 1

The issue was with setting the dimensions of the parent canvas.
I have added this line in onLoadComplete() function

        this.height = bmp.height + 20;
        this.width  = bmp.width;