Problem with symbol disappearing in component when instantiated

programming flash
1

[SOLVED]
Hi,

I’ve created an AlertBox component by doing the following:

  1. Create new fla file
  2. Create shape and convert to movieclip on stage
  3. Name new movieclip AlertBox in movieclip properties
  4. Add custom class path in Properties -> Linkage dialog box and Component Definition dialog box:

com.company.ui.AlertBox;

  1. Checked export in first frame box
  2. To test this stage: Export as SWC file
  3. Place SWC in components directory
  4. Create new test fla file
  5. Import AlertBox SWC from components
  6. Place instance on stage.
  7. Ctrl->Enter and test

AlertBox displays fine.

Now what I wanted to do is add a close button to my AlertBox, so I’ve done the following:

  1. Create new movieclip with graphics for close button and name BasicButton in movieclip properties
  2. Add custom class path in Properties -> Linkage dialog box:

com.company.ui.buttons.BasicButton;

  1. In my AlertBox class:

a) Add import com.ukfast.ui.buttons.BasicButton;
b) Add _closeButton = new BasicButton(); to my createChildren() function
c) Add addChild(_closeButton)

  1. Re-export AlertBox SWC file
  2. Delete old AlertBox component from test fla and import new AlertBox component.
  3. Place instance on stage, at this stage I can see my close button
  4. Ctrl-enter and test, AlertBox displays but close button does not.

Now what I thought it might be is that the close button was being covered by something else in the AlertBox class but I’ve hidden those lines of code and this is not the case, does any know what the problem is?

AlertBox.as:


package com.ukfast.ui
{ 
	import flash.display.DisplayObject;
	import flash.display.GradientType;
	import flash.display.SpreadMethod;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;	
	import flash.geom.*;
	import com.company.drawing.shapes.filled.RoundedGradientRectWithBevel;
	import com.company.ui.buttons.BasicButton;
	
	public class AlertBox extends MovieClip
	{
		/* //////////////////////////////////////////// */
		/* //////    Define Private Variables   /////// */
		/* //////////////////////////////////////////// */
		
		private var _background:RoundedGradientRectWithBevel;
		private var _width:Number;
		private var _height:Number;
		private var _textField:TextField;
		private var _titleTextField:TextField;
		private var _messageTextField:TextField;
		private var _closeButton:MovieClip;
		
		/* //////////////////////////////////////////// */
		/* //////    Define Public Variables    /////// */
		/* //////////////////////////////////////////// */
		
		/* //////////////////////////////////////////// */
		/* //////    Define Public Functions    /////// */
		/* //////////////////////////////////////////// */
		
		public function AlertBox()
		{
			init();
			createChildren();
			draw();
		} 
		private function init():void
		{ 
			scaleX = 1;
			scaleY = 1;
			
			// Set default width and height
			_width = 300;
			_height = 100;
			
			// remove the avatar
			removeChildAt(0);
		} 
		private function createChildren():void
		{ 
			// Create close button
			_closeButton = new BasicButton();
			
			// Position close button
			_closeButton.x = 10;//_width - closeButton.width - 10;
			_closeButton.y = 10;

			// Create background gradient rectangle
			_background = new RoundedGradientRectWithBevel(_width,_height);
			_background.x = 0;
			_background.x = 0;
			
			// Create textfield to display error
                        _titleTextField = new TextField();
			
			// Set default settings
			_titleTextField.autoSize = TextFieldAutoSize.LEFT;
			_titleTextField.background = false;
			_titleTextField.border = false;
			_titleTextField.textColor = 0x000000;
			_titleTextField.width = _width - 20;
			_titleTextField.height = 30;
			_titleTextField.x = 5;
			_titleTextField.y = 5;
			
			// Create text format object
			var _titleTextFieldFormat:TextFormat = new TextFormat();
			
			// Set text format object parameters
			_titleTextFieldFormat.font = "Arial";
			_titleTextFieldFormat.color = 0x000000;
			_titleTextFieldFormat.size = 12;
			_titleTextFieldFormat.underline = false;
			_titleTextFieldFormat.bold = true;
			
			// Apply format object to error textfield
			_titleTextField.defaultTextFormat = _titleTextFieldFormat;
			
			// Set default text
			_titleTextField.text = "Test title";
			
			// Create textfield to display error
            _messageTextField = new TextField();
			
			// Set default settings
			_messageTextField.autoSize = TextFieldAutoSize.LEFT;
			_messageTextField.background = false;
			_messageTextField.border = false;
			_messageTextField.textColor = 0x000000;
			_messageTextField.height = _height - 20;
			_messageTextField.width = _width - 20;
			_messageTextField.wordWrap = true;
			_messageTextField.x = (_width - _messageTextField.width) / 2;
			_messageTextField.y = 40;
			
			// Create text format object
			var _messageTextFieldFormat:TextFormat = new TextFormat();
			
			// Set text format object parameters
			_messageTextFieldFormat.font = "Arial";
			_messageTextFieldFormat.color = 0x000000;
			_messageTextFieldFormat.size = 12;
			_messageTextFieldFormat.underline = false;
			
			// Apply format object to error textfield
			_messageTextField.defaultTextFormat = _messageTextFieldFormat;
			
			// Set default text
			_messageTextField.text = "This is a test message";
			
			// Add children to stage
			//addChild(_background);
			//addChild(_titleTextField);
			//addChild(_messageTextField);
			addChild(_closeButton);
		}
		protected function draw():void
		{ 
			// Redraw backgroun
			//_background.setSize(_width,_height);
			
			// Position text
			//_messageTextField.x = (_width - _messageTextField.width) / 2;
			//_messageTextField.y = 40;
		} 
		public function setSize(__width:Number, __height:Number)
		{
			// Set size of alert box
			_width = __width;
			_height = __height;
			
			// Set message size.
			_messageTextField.width = _width - 20;
			_messageTextField.height = _height - 20;
			
			// Redraw
			draw();
		}
		public function setTitleText(_text:String)
		{
			_titleTextField.text = _text;
			
			// Redraw
			draw();
		}
	}
}

BasicButton.as:


package com.company.ui.buttons
{
	import flash.display.DisplayObject;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.MouseEvent;

	public class BasicButton extends MovieClip
	{
		public function BasicButton()
		{
			// Stop play
			stop();
			
			// Make button behave like a button
			this.buttonMode = true;
			
			// Show hand cursor on mouse over
  			this.useHandCursor = true;
			
			// Add mouse over event listener
			addEventListener(MouseEvent.MOUSE_OVER,onMouseOver);
			
			// Add mouse out event listener
			addEventListener(MouseEvent.MOUSE_OUT,onMouseOut);

			// Add mouse down event listener
			addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
			
		}
		public function onMouseOver(evt:MouseEvent)
		{
			gotoAndStop(2);
		}
		public function onMouseOut(evt:MouseEvent)
		{
			gotoAndStop(1);
		}		
		public function onMouseDown(evt:MouseEvent)
		{
			gotoAndStop(3);
		}				
	}
}

Thanks,

eb_dev