addChild(mc) to Flex app

[slipjack]

Hi all,

I've actually done this in an Apollo app without issues, but I can't seem to get any drawn movieclip content to display. You can do that in a Flex app, correct? I keep getting UIComponent errors, so I think I've just go something wrong in my setup.

Here's a sample of (non working) code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute"
creationComplete="service.send()">

<mx:Script>
<![CDATA[
import mx.containers.Box;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import com.adobe.serialization.json.JSON;
import flash.display.Stage;
import mx.core.UIComponent;

private var boxMC : MovieClip;

private function onJSONLoad(event:ResultEvent):void
{
//get the raw JSON data and cast to String
var rawData:String = String(event.result);
var arr:Array = (JSON.decode(rawData) as Array);
var dp:ArrayCollection = new ArrayCollection(arr);
grid.dataProvider = dp;
drawBox();
}
private function drawBox() : void {
drawRoundBox(0,0,300,300,3,0x336699,0xffffff,1,100 ,50);
}
public function drawRoundBox (xPos : Number, yPos : Number, boxWidth : Number, boxHeight : Number, cornerRadius : Number, startColor : Number, endColor : Number, depth : Number, boxAlpha : Number, boxAlpha2 : Number) : void
{
trace ("drew box");
var u:UIComponent = new UIComponent();
addChild(u);
boxMC = new MovieClip();
boxMC.x = xPos;
boxMC.y = yPos;
var fillType :String = "linear";
var spreadMethod :String = "pad";
var interpolationMethod :String = "RGB";
var colors : Array = [startColor, endColor];
var alphas : Array = [boxAlpha, boxAlpha2];
var ratios : Array = [0, 255];
var focalPointRatio : Number = 0;
var matrix :Matrix = new Matrix();

matrix.createGradientBox(boxWidth, boxHeight, Math.PI/2, 0, 0);
boxMC.beginGradientFill (fillType, colors, alphas, ratios, matrix,spreadMethod,interpolationMethod, focalPointRatio); /// oops
boxMC.graphics.moveTo (cornerRadius, 0);
boxMC.graphics.lineTo (boxWidth - cornerRadius, 0);
boxMC.graphics.curveTo (boxWidth, 0, boxWidth, cornerRadius);
boxMC.graphics.lineTo (boxWidth, cornerRadius);
boxMC.graphics.lineTo (boxWidth, boxHeight - cornerRadius);
boxMC.graphics.curveTo (boxWidth, boxHeight, boxWidth - cornerRadius, boxHeight);
boxMC.graphics.lineTo (boxWidth - cornerRadius, boxHeight);
boxMC.graphics.lineTo (cornerRadius, boxHeight);
boxMC.graphics.curveTo (0, boxHeight, 0, boxHeight - cornerRadius);
boxMC.graphics.lineTo (0, boxHeight - cornerRadius);
boxMC.graphics.lineTo (0, cornerRadius);
boxMC.graphics.curveTo (0, 0, cornerRadius, 0);
boxMC.graphics.lineTo (cornerRadius, 0);
boxMC.graphics.endFill ();
u.addChild(boxMC);
}
]]>

</mx:Script>

<mx:HTTPService id="service" resultFormat="text"
url="http://weblogs.macromedia.com/mesh/mashedpotato.json"
result="onJSONLoad(event)" />

<mx:DataGrid id="grid" right="10" left="10" top="10" bottom="10" alpha="0.52">
<mx:columns>
<mx:DataGridColumn headerText="url" dataField="url" />
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Depth" dataField="depth"/>
</mx:columns>
</mx:DataGrid>
<mx:Image id="close" >

</mx:Image>
</mx:Application>


When I just tried adding the mc directly with addChild(mc), Flex was throwing type conversion errors. Adding it to a UICompenent first works, but nothing displays. I'm sure I'm missing something, help would be appreciated!

[dr_zeus]

MovieClips and other primitive display objects cannot be added as children of Flex containers, like Application, HBox, Canvas, etc. Only UIComponents may be added as children. UIComponent can have any type of children, as you discovered, but we can make things a lot easier.

Why don't you simply draw directly to the UIComponent you created? UIComponent is a subclass of Sprite, which has all the same drawing capabilities as MovieClip without all the extra timeline stuff.

public function drawRoundBox (xPos : Number, yPos : Number, boxWidth : Number, boxHeight : Number, cornerRadius : Number, startColor : Number, endColor : Number, depth : Number, boxAlpha : Number, boxAlpha2 : Number) : void
{
trace ("drew box");
var u:UIComponent = new UIComponent();
this.addChild(u);
u.x = xPos;
u.y = yPos;
var fillType :String = "linear";
var spreadMethod :String = "pad";
var interpolationMethod :String = "RGB";
var colors : Array = [startColor, endColor];
var alphas : Array = [boxAlpha, boxAlpha2];
var ratios : Array = [0, 255];
var focalPointRatio : Number = 0;
var matrix :Matrix = new Matrix();
matrix.createGradientBox(boxWidth, boxHeight, Math.PI/2, 0, 0);
u.graphics.moveTo (cornerRadius, 0);
u.graphics.lineTo (boxWidth - cornerRadius, 0);
u.graphics.curveTo (boxWidth, 0, boxWidth, cornerRadius);
u.graphics.lineTo (boxWidth, cornerRadius);
u.graphics.lineTo (boxWidth, boxHeight - cornerRadius);
u.graphics.curveTo (boxWidth, boxHeight, boxWidth - cornerRadius, boxHeight);
u.graphics.lineTo (boxWidth - cornerRadius, boxHeight);
u.graphics.lineTo (cornerRadius, boxHeight);
u.graphics.curveTo (0, boxHeight, 0, boxHeight - cornerRadius);
u.graphics.lineTo (0, boxHeight - cornerRadius);
u.graphics.lineTo (0, cornerRadius);
u.graphics.curveTo (0, 0, cornerRadius, 0);
u.graphics.lineTo (cornerRadius, 0);
u.graphics.endFill ();
}

[slipjack]

OK, I got it... I had lost an important line:

u.graphics.beginGradientFill (fillType, colors, alphas, ratios, matrix,spreadMethod,interpolationMethod, focalPointRatio);

No wonder it was debuggin as drawing but nothing was displayed. Thanks again for the explanation though, it helped.