./Sizing in the IDE pt.2

In the previous article we looked at how to keep our visual assets the same size as our component when resizing within the IDE via the Free Transform Tool (FTT). Now we are going to take it one step further, we are still going to resize our asset based on the FTT, but we are going to add an additional asset that is going to be constrianted so that only some of it will scale.

Our New Constrained Component
Now while this component does contain similar functionality to our ExampleBox component from the last article I’m not going to extend from it – this is purely from an illustrative perspective so as to aid clarity in what we are actually doing with this component. So without further ado lets have a look at the actual class file. if you haven’t already read the previous article then I would suggest you do so before reading any further so you don’t miss out on any important points.

[actionscript]/*
* @package: com.flashgen.examples.components
* @component: ExampleFixedBox
* @author: Mike Jones
* @url: http://www.flashgen.com
* @email: mikej@flashgen.com
*
* @version: 1.0
* @summary: A component to illustrate the ability to size the component correctly via
* the Free Transform Tool (Q key) in the Flash IDE.
*
* @license: Released under the GNU PUBLIC LICENSE (GPL)
*/

import mx.core.UIComponent;class com.flashgen.examples.components.ExampleFixedBox exapplication/x-shockwave-flashtends UIComponent
{
/ Components must declare these to be proper
// components in the components framework.
public static var symbolName :String = “ExampleFixedBox”;
public static var symbolOwner :Object = com.flashgen.examples.components.ExampleFixedBox;
public var className :String = “ExampleFixedBox”;

private var boundingBox_mc :MovieClip;
private var _resizeableSquare :MovieClip;
private var _fixedSquare :MovieClip;

private var _lineStart, _lineEnd :Number = 0;
private var _lineWeight :Number = 2;
private var _lineColor :Number = 0x000000;
private var _lineAlpha :Number = 100;

private var _hOffset :Number = 30;

private function init():Void
{
super.init();
useHandCursor = false;
boundingBox_mc._visible = false;
boundingBox_mc._width = 0;
boundingBox_mc._height = 0;
}

private function createChildren():Void
{
_resizeableSquare = this.createEmptyMovieClip(‘_resizeableSquare’, this.getNextHighestDepth());
_fixedSquare = this.createEmptyMovieClip(‘_fixedSquare’, this.getNextHighestDepth());
}

/**
* The size method is invoked when the component’s size
* changes. This is an opportunity to resize the children,
* and the graphics / components it contains.
*/
private function size():Void
{
invalidate();
}

/**
* This is an overridden method so we can have a finer control
* over what we need to trigger on an invalidate() call.
*/
private function draw() :Void
{
var w :Number = this._lineWeight;
var c :Number = this._lineColor;
var a :Number = this._lineAlpha;
var lx :Number = this._lineStart;
var ly :Number = this._lineEnd;
var lw :Number = this.width;
var lh :Number = this.height;
var hOff :Number = this._hOffset

var rs :MovieClip = this._resizeableSquare;
var fs :MovieClip = this._fixedSquare;

rs.clear();
fs.clear();

with(rs)
{
lineStyle(w, c, a);
moveTo(lx, ly);
lineTo(lx, lh – hOff);
lineTo(lw, lh – hOff);
lineTo(lw, ly);
lineTo(lx, ly);
}

with(fs)
{
lineStyle(w, c, a);
moveTo(lx, lh);
lineTo(lx, lh – hOff /2);
lineTo(lw, lh – hOff /2);
lineTo(lw, lh);
lineTo(lx, lh);
}
}
}[/actionscript]

As you can see this class is almost identical to the previous one except we now have an additional asset variable declared called fixedSquare. We also have an additional property declared called hOffset. Now the only real differences in this class and ExampleBox are that in the createChildren() method we create two empty movieclips, one for the rectangle that will scale when we scale our component and the other for the rectangle we wish to constrain.

[actionscript]private function createChildren():Void
{
_resizeableSquare = this.createEmptyMovieClip(‘_resizeableSquare’, this.getNextHighestDepth());
_fixedSquare = this.createEmptyMovieClip(‘_fixedSquare’, this.getNextHighestDepth());
}[/actionscript]

For us to constrain our new asset we need to alter the draw() method and add in the code to position the new asset and control how it draws itself when the component is scaled in the IDE.

[actionscript]

/**
* This is an overridden method so we can have a finer control
* over what we need to trigger on an invalidate() call.
*/
private function draw() :Void
{
var w :Number = this._lineWeight;
var c :Number = this._lineColor;
var a :Number = this._lineAlpha;
var lx :Number = this._lineStart;
var ly :Number = this._lineEnd;
var lw :Number = this.width;
var lh :Number = this.height;
var hOff :Number = this._hOffset

var rs :MovieClip = this._resizeableSquare;
var fs :MovieClip = this._fixedSquare;

rs.clear();
fs.clear();

with(rs)
{
lineStyle(w, c, a);
moveTo(lx, ly);
lineTo(lx, lh – hOff);
lineTo(lw, lh – hOff);
lineTo(lw, ly);
lineTo(lx, ly);
}

with(fs)
{
lineStyle(w, c, a);
moveTo(lx, lh);
lineTo(lx, lh – hOff /2);
lineTo(lw, lh – hOff /2);
lineTo(lw, lh);
lineTo(lx, lh);
}
}[/actionscript]

Firstly we’ll set up a set of variables within the draw() method so that we can easily access them via the with() keyword. It also allows us to perform any calculations that we may need in one place so stopping us from littering our code with magic values. Next we need to call each of our movieclips clear() methods – this removes all of the visual assets created by the DrawingAPI from within that clip. If we didn’t do this you’d get a load of boxes being drawn based on the size of the component as you resized it and released as the previous one was not removed.

Without a clear() call you get this.
Now the code for the resizeable rectangle is covered off in the previous article and if you look closely at the fixed size rectangle code you’ll see we make sure that the height of this rectangle remains constant

[actionscript] lineTo(lx, lh – hOff /2);
lineTo(lw, lh – hOff /2);[/actionscript]

As you can see if _hOffset has a value of 30, then we are setting the fixed rectangle to retain _hOffset / 2, (or 15). As this is a constant the only change in this rectangle is that it will scale along the X axis – i.e. it will get wider but not taller.

If you’re wondering how you could apply this think of some small widget / micro-apps that would benefit from this sort of control. If you coupled it with composition you could make a search field and button, a interactive viewer with multiple controls; the list is probably quite endless. To illustrate this see the examples below where I’ve just switched the two rectangles for a TextArea and Button in my component.

placeholder for flash movie

You can download the files here

I’ve included a placebo version of the TextArea / Button example directly above so you can see this process working with a composited component.

Happy coding :)