Posted on Monday 27 June 2005
When using FAME or generally when dynamically placing movieclips on stage sometimes I have to guess the coordinates where I will place the views. It's a guessing game that I'm sure a lot have played. Well all my views inherit from a BasicView class which itself inherits from mx.screens.Form (to make Focus management work correctly).
All these nice CSS extensions, like Aardvark for example, are coming up these days that can highlight the current element and tell you some info on it. So I did a little something similar here: when I press Control+D I get to see a tooltip in the upper left corner that shows the coordinates of the view and I can drag it where I want and see the new coordinates, which I can then plug into my code. Pressing Control+R redraws the outline. Dead simple. Here's the code:
function onLoad()
{
super.onLoad();
//do the voodoo
if(CustomActions != null || _level0.FLASHOUT_ENABLE != null)
{
__placer = this.createEmptyMovieClip('mcPlacer', 102302);
__placer.createTextField('tooltip', 0, -80, -18, 80, 18);
__placer.tooltip.background = true;
__placer.tooltip.backgroundColor = 0xFFFF99;
__placer.tooltip.border = true;
var myformat:TextFormat = new TextFormat();
myformat.font = "Verdana";
__placer.onPress = Delegate.create(this, handleTooltipPress);
__placer.onRelease = Delegate.create(this, handleTooltipRelease);
__placer.tooltip.setNewTextFormat(myformat);
doLater(Delegate.create(this, __updateTooltip));
doLater(Delegate.create(this, __updateOutline));
__placer._visible = false;
Key.addListener(this);
}
}
private function onKeyDown()
{
if(Key.getCode() == 68 && Key.isDown(Key.CONTROL))
{
__placer._visible = !__placer._visible;
}
if(Key.getCode() == 82 && Key.isDown(Key.CONTROL))
{
__updateTooltip();
__updateOutline();
}
}
private function __updateTooltip()
{
__placer.tooltip.text = this.x + ':' + this.y;
}
private function __updateOutline()
{
__placer.clear();
__placer.moveTo(-2, -2);
__placer.lineStyle(2, 0xff6633);
__placer.lineTo(-2, height + 2);
__placer.lineTo(width + 2, height + 2);
__placer.lineTo(width + 2, -2);
__placer.lineTo(-2, -2);
}
private function handleTooltipPress()
{
this.startDrag();
onMouseMove = function()
{
this.__updateTooltip();
updateAfterEvent();
}
}
private function handleTooltipRelease()
{
this.stopDrag();
__updateTooltip();
onMouseMove = null;
}
CustomActions is only available in the Flash IDE and FLASHOUT_ENABLE is a FlashVar that is generated by Flashout, so you don't need to worry about stripping the code once it's on a live site. Pretty cool huh?
