AS 3.0 / Flex 3.0 Beta

Hi all,

I am writing a Flex Application with AS classes. I am trying to make a very simple image changer that I had working in CS3 in Flash work in Flex so I can break ties with Flash and develop entirely on Linux.

From a high level point of view, the problem I am facing is: I have a photo class that extends the mx.containers.Canvas class. It provides 2 additional properties, _image:Bitmap, and _title:Label.

Basically, I want to make both of those visible within the photo class, so what I did was do this.addChild(_title) and this.addChild(_image).

If I do that on the stage object, it obviously works fine, but shouldn’t it be withing the object I want it to be within? If so, why are those objects not showing even if the parent object is added to the stage?


package walterjwhite
{
    import flash.display.Bitmap;
    import flash.events.Event;
    import flash.events.MouseEvent;
    
    import mx.controls.Alert;
    import mx.controls.Label;
    import mx.containers.Canvas;
    import mx.effects.Fade;
    
    import flash.display.Graphics;

    public class photo extends Canvas
    {
        private var _title:Label;
        private var _tooltips:Label;
        
        private var _image:Bitmap;
        private var _fadeImage:Fade;
        private var _fadeTitle:Fade;
        private var _addedToStage:Boolean;
        
        public function photo()
        {
            super();
            
            //    disable context menu
            doubleClickEnabled = false;
            opaqueBackground = 0xffffff;
            _image = null;
            _title = new Label();
            _tooltips = new Label();
                _tooltips.text = "Click to contact me.";
            
            this.visible = true;
            this.alpha = 1;
            
            _fadeImage = new Fade(_image);
                _fadeImage.alphaFrom = 0.0;
                _fadeImage.alphaTo = 1.0;
                _fadeImage.duration = 1000;
            
            _fadeTitle = new Fade(_title);
                _fadeTitle.alphaFrom = 0.0;
                _fadeTitle.alphaTo = 1.0;
                _fadeTitle.duration = 1000;
        }
        
        public function setImage(imageToLoad:Bitmap, titleToSet:String):void
        {
            if(image != null)
            {
                _title.text = titleToSet;
                _image = imageToLoad;
                
                try
                {
                    _title.width = _image.width;
                    _title.move(0, _image.height);
                }
                catch(error:Error)
                {
                    Alert.show("error:" + error.message + ":" + error.name);
                }
            
                if(!_addedToStage)
                {
                    _addedToStage = true;
                    
                    try
                    {
                        addChild(_image);
                        addChild(_title);
                        addChild(_tooltips);
                    }
                    catch(error:Error)
                    {
                        Alert.show("failed to add iamge to show" + error.message + error.getStackTrace() + error.name);
                    }
                }
                
                //_fadeImage.play();
                //_fadeTitle.play();
                
                invalidateDisplayList();
                invalidateSize();
                invalidateProperties();
                
                //    let the stage know we changed something
                dispatchEvent(new Event(Event.CHANGE, true));
            }
            else
                Alert.show("image is null");
        }
        
        private function showTips(event:MouseEvent):void
        {
                stage.addChild(_tooltips);
                moveTips(event);
        }
        
        private function moveTips(event:MouseEvent):void
        {
            //    left or right
            var tipX:Number = event.localX + 10;
            /*
            if(x + imageToolTip.width > stage.stageWidth &&
               stage.stageWidth > imageToolTip.width)
                x = event.stageX - 10 - imageToolTip.width;
            */
            _tooltips.x = tipX;
            _tooltips.y = event.localY + 10;
        }
        
        private function hideTips(event:MouseEvent):void
        {
            stage.removeChild(_tooltips);
        }
    }
}

A few other questions.

As you can tell from the code, I have a tween set to take place when the image is changed. Should that be a state change?

Walter