drawing api and y scale

[mattmuller]

Hi I have a rectabgle drawn with the drawing api, I intend on scaling it using the animation class, however it scales downwards, tho if I scale it *-1 to scale it upwards it flips its y axis beofre scaling leaveing a gap in the mask any ideas, heres the code...

cheers

matt

Attach Code

var mask : MovieClip = this.createEmptyMovieClip ("mask" + i, getNextHighestDepth ());
mask._x = menu._x+100;
mask._y = menu._y;
mask.beginFill (0, 100);
mask.moveTo (0, 0);
mask.lineTo (menu.title._width, 0);
mask.lineTo (menu.title._width, menu.title._height);
mask.lineTo (0, menu.title._height);
mask.endFill ();
menu.masker = mask;

[jsebrech]

Scale extends around the registration point, leaving only the registration point fixed compared to its container. When you use the drawing API, the registration point is 0,0. If your registration point is in the topleft of your clip (all content is drawn at positive coordinates), then scale will increase towards the bottom right. You get around this by moving the _x and _y coordinates to match the scale, or by drawing things centered around 0,0.

[mattmuller]

any chance of an example, what do you mean by...

"You get around this by moving the _x and _y coordinates to match the scale,"

use negative numbers?

cheerss

Matt

[jsebrech]

By scaling I assume you're talking about the _xscale and _yscale properties of the movieclip you're drawing in.

If not, please explain what exactly you mean by scale.

The _xscale and _yscale increase the coordinates of everything drawn in a movieclip, so an _xscale of 200 will make a line of -10 to 90 go from -20 to 180.

[mattmuller]

yeah dude, _xscale. its all a bit confusing really :|

[jsebrech]

OK, hypothetical example.

You have a movieclip my_mc at 0,0.
You use the drawing api to draw a line inside it from 10,10 to 110,20.
You set _xscale of that clip to 200.
The line's starting coordinates moves from 10 to 20, because all the coordinates in the movieclip are scaled by _xscale, so your line that used to be from 10,10 to 110,20 is now from 20,10 to 220,20.
Now, suppose your document has x dimension 120, and that meant your line used to be centered, but now it isn't. How do you center it?

Answer: either you place the movieclip at _x = 60 and draw the line from -50 to 50 (because the line is 100 wide), or you leave the line as is but move the clip's _x property so that the center of the movieclip is the center of the document. So, my_mc._x = (_width / 2) - (my_mc._width / 2)

[duanelives]

Here is code which dynamically creates a menu. The last step is that I want the menu to appear to zoom straight out toward the viewer. But look at how it moves -- just by varying the _xscale and _yscale. How can the above answer be applied here -- not just to drawing a line, but to positioning the clip?

Code:


var myClip:MovieClip;
var myBGColor:Number = 0x999999;
var myAlpha:Number = 40;
var cellWidth:Number =120;
var cellHeight:Number = 20;
var lowerRightCorner:Number;
var rightEdge:Number;
var start_x:Number = 300;
var start_y:Number = 100;
var labelFormat:TextFormat;
var numberOfMenuItems:Number = 3;

//create a movieClip to hold the table cells
createEmptyMovieClip("holder_mc", 1);

function makeMenu(numberOfMenuItems){
var nextDepth:Number = getNextHighestDepth();
var name:String = "cell"+i+ "_mc";
//Create Movie Clip
myClip = holder_mc.createEmptyMovieClip(name, i+ 10);

//Position to begin drawing
myClip.moveTo( start_x, start_y ); // Start point
rightEdge = start_x + cellWidth; //position of cell's right edge
myClip.lineStyle( 1, myBGColor, 100 );
myClip.beginFill (myBGColor, myAlpha);
lowerRightCorner = start_y + cellHeight;
myClip.lineTo( rightEdge, start_y); //Top border
myClip.lineTo( rightEdge, lowerRightCorner);// Right border
myClip.lineTo( start_x, lowerRightCorner );//bottom border
myClip.lineTo( start_x, start_y); //left border
myClip.endFill (start_x, start_y);
start_y = start_y + cellHeight;
}

for(i=0; i < numberOfMenuItems; i++){
makeMenu(numberOfMenuItems);

}

//remove everything below here to see the original (and ending) position of the movie
holder_mc._xscale = 50;
holder_mc._yscale = 50;


this.onEnterFrame = function(){
if(holder_mc._xscale < 100){
holder_mc._xscale += 3;
holder_mc._yscale +=3;
}
}

stop();